<!DOCTYPE html>
<html>
<head>
	<meta charfun='utf-8'>
	<title>generator</title>
	<script type='text/javascript' src='vector.js'></script>
	<script type='text/javascript' src='variable.js'></script>
	<script type='text/javascript' src='vue.js'></script>
	<style type='text/css'>		
		body{
			user-select: none;
		}        
        textarea{
            resize: none;
            width: 100%;
            height: 60px;
            overflow: auto;
            word-break: break-all;
        }
	</style>
</head>
<body oncontextmenu='return false'>
	<div id='app'>
		<button @click='generator'>generator</button>
		<button @click='xSwitch'>switch</button>
		<button @click='zoom("out")'>zout</button>
		<button @click='zoom("in")'>zin</button>
		<textarea disabled>{{ans}}</textarea>
		<hr>
		<p>Standard Source:</p>
		
		<hr>
	</div>
	<div id='box'></div>
	<script type='text/javascript'>
		const V = Vue.createApp({
			data(){return{
				ans: '',
				x: null
			}},
			methods:{
				generator(){					
					let a = []
					for(let i=1; i<V.x.svg.length; i++)
						a.push(V.x.svg[i].style.opacity=='1' ? 1 : 0)
					V.ans = '['+a.reduce((i,j)=>i+','+j)+']'
				},
				zoom: z => {
					let p = V.x.svg[0].parentNode.parentNode
					let t = parseInt(p.getAttribute('width'))
					if(z == 'in') t = t * 1.1 + 'px'
					else t = t / 1.1 + 'px'
					p.setAttribute('height', t)
					p.setAttribute('width', t)
				},
				xSwitch(){
					let t = V.x.all.length == 11
					V.x = t ? Z.led : Z.lcd
					Z.lcd.svg[0].parentNode.style.display = t ? 'none' : ''
				}
			},
			watch:{		//be careful, when fucntion done then execute watch
				'x.dis': {
					handler: n => n.map((i, j) => V.x.svg[j+1].style.opacity = i ? 1 : V.x.brightness),
					deep: true	
				}
			},
			mounted(){
				this.x = Z.lcd
				let p = document.getElementById('box')
				p.innerHTML = Z.svg
				let s = p.children[0]
				// s.funAttribute('height', '990px')
				// s.funAttribute('width',  '990px')
				let lcd = s.children[3].children
				let led = s.children[2].children
				Z.lcd.svg = lcd
				Z.led.svg = led

				for(let i=1; i<lcd.length; i++)
					lcd[i].addEventListener('mouseup', () => 
						lcd[i].style.opacity = lcd[i].style.opacity=='1'?Z.lcd.brightness:1)

				for(let i=1; i<led.length; i++)
					led[i].addEventListener('mouseup', () =>
						led[i].style.opacity = led[i].style.opacity=='1'?Z.led.brightness:1)

				let btn = s.children
				let btntag = btn[4].children
				let up = i => {
					if(btn[i].style.opacity == 1){
						btn[i].style.opacity = 0
						Z.dis(V.x, 9-i)
					}		
				}
				for(let i=5; i<9; i++){		
					btn[i].style.opacity = 0	
					btntag[12-i].addEventListener('mousedown', () => btn[i].style.opacity = 1)
					btntag[12-i].addEventListener('mouseup', up.bind(null,i))
					btn[i].addEventListener('mousedown', () => btn[i].style.opacity = 1)
					btn[i].addEventListener('mouseup', up.bind(null,i))
					btn[i].addEventListener('mouseleave', up.bind(null,i))
				}
			}
		}).mount('#app')
	</script>
</body>
</html>